import React from "react";
import {
  Input,
  InputGroup,
  Stack,
  InputLeftAddon,
  Button,
  FormControl
} from "@chakra-ui/react";
import { EmailIcon, LockIcon, PhoneIcon } from '@chakra-ui/icons'

export default class SignUp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '', //账号
      pwd: '', // 密码
      pwdConfirm: '', // 确认密码
    }
  }

  handleSignUp() {
    if (this.setState.username  && this.setState.pwd && this.setState.pwdConfirm ) {
      alert('注册成功')
    } else {
      alert('注册失败')
    }
  }

  handleChange(key, val) {
    this.setState({
      [key]: val.target.value
    })
    console.log(this.state)
  }

  render() {

    return (
      <form>
        <Stack bgColor="" spacing="0">
          <FormControl >
            <InputGroup>
              <InputLeftAddon children={<EmailIcon />} />
              <Input onChange={value => this.handleChange('username', value)} placeholder="请输入用户名" />
            </InputGroup>
          </FormControl>
          <InputGroup>
            <InputLeftAddon children={<PhoneIcon />} />
            <Input  onChange={value => this.handleChange('pwd', value)} type="password" placeholder="请输入密码" />
          </InputGroup>
          <InputGroup>
            <InputLeftAddon children={<LockIcon />} />
            <Input onChange={value => this.handleChange('pwdConfirm', value)} type="password" placeholder="请输入密码" />
          </InputGroup>
        </Stack>
        <Button marginTop="20px" _hover={{ bgColor: "#3db922" }} w="100%" color="#fff" onClick={this.handleSignUp.bind(this)}  bgColor="#42c02e">
          注册
        </Button>
      </form>
    );
  }
}
